{% extends 'base/front_base.html' %}
{% block title %}首页 - 小饭桌{% endblock %}
{% block header %}
    <link rel="stylesheet" href="{% static 'css/news/index.min.css' %}">
    {% verbatim %}
    <!-- arttemplate  -->
    <script type="text/html" id="news-item">
        {{each newses news index}}
        <li class="list-item">
            <a href="/news/{{ news.id }}/">
                <div class="thumbnail-group">
                    <img src="{{ news.thumbnail }}"
                         alt="">
                </div>
                <div class="content-group">
                    <div class="c-title">{{ news.title }}</div>
                    <div class="c-desc">{{ news.desc }}</div>
                    <div class="c-more">
                        <span class="c-more-type">{{ news.category.name }}</span>
                        <span class="c-more-time">{{ news.pub_time|format_time }}</span>
                        <span class="c-more-author">{{ news.author.username }}</span>
                    </div>
                </div>
            </a>
        </li>
        {{/each}}
    </script>
    {% endverbatim %}
{% endblock %}
{% block footer %}
    <script src="{% static 'js/index.min.js' %}"></script>
{% endblock %}
{% block main %}
    <div class="main">
        <!-- wrapper  -->
        <div class="wrapper">
            <div class="news-wrapper">
                <!-- focus   -->
                <div class="focus-wrapper">
                    <ul class="focus-ul">
                        {% for focus in focuses %}
                            <li><a href="{{ focus.link_to }}"><img src="{{ focus.thumbnail }}" alt=""></a></li>
                        {% endfor %}
                    </ul>
                    <a href="javascript:;" class="arrow arrow-l">&lt;</a>
                    <a href="javascript:;" class="arrow arrow-r">&gt;</a>
                    <div class="dots-box">
                        <ol class="dots">
                            <!-- <li class="active"></li>
                             <li></li>
                             <li></li>  -->
                        </ol>
                    </div>
                </div>
                <!-- recommend  -->
                <div class="recommend-wrapper"></div>
                <!-- tabs  -->
                <div class="tabs-wrapper">
                    <ul class="tabs-ul">
                        <li class="active" data-pk="0"><a href="#">最新资讯</a></li>
                        {% for category in categories %}
                            <li data-pk="{{ category.id }}"><a href="javascript:;">{{ category.name }}</a></li>
                        {% endfor %}

                    </ul>
                </div>
                <!-- news  -->
                <div class="news-list-wrapper">
                    <ul class="news-list-ul">
                        {% for news in newses %}
                            <li class="list-item">
                                <a href="{% url 'news:detail_view' news_id=news.id %}">
                                    <div class="thumbnail-group">
                                        <img src="{{ news.thumbnail }}"
                                             alt="">
                                    </div>
                                    <div class="content-group">
                                        <div class="c-title">{{ news.title }}</div>
                                        <div class="c-desc">{{ news.desc }}</div>
                                        <div class="c-more">
                                            <span class="c-more-type">{{ news.category.name }}</span>
                                            <span class="c-more-time">{{ news.pub_time|format_time }}</span>
                                            <span class="c-more-author">{{ news.author.username }}</span>
                                        </div>
                                    </div>
                                </a>
                            </li>
                        {% endfor %}

                    </ul>
                </div>
                <!-- more-btn  -->
                <div class="more-news">
                    <button class="more-btn">查看更多</button>
                </div>
            </div>
            {% include 'common/sidebar.html' %}
        </div>
    </div>
{% endblock %}
